<!DOCTYPE HTML>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0, minimum-scale=1.0, user-scalable=0, initial-scale=1.0, width=device-width" />
    <meta name="format-detection" content="telephone=no, email=no, date=no, address=no">
    <title>学习计划</title>
    <link rel="stylesheet" type="text/css" href="../../css/aui.css" />
    <link rel="stylesheet" type="text/css" href="../../css/main.css" />
    <link rel="stylesheet" type="text/css" href="../../css/swiper.css" />

    <style>
        body {
            background-color: #fff;
        }

        .search {
            padding: 15px 15px 5px 15px !important;
            width: 100%;
            position: relative;
        }

        .input {
            border-radius: 22px !important;
            border: 1px solid #dedede !important;
            height: 25px !important;
            line-height: 25px !important;
            font-size: 14px !important;
            color: #cbcbcb !important;
            padding-left: 15px !important;
        }

        .search img {
            position: absolute;
            right: 28px;
            top: 18px;
            width: 20px;
        }

        .test {
            position: relative;
        }

        .list {
            height: 36px;
            font-size: 13px;
            line-height: 36px;
            border-bottom: 2px solid #dadada;
            display: -webkit-box;
            overflow-x: auto;
            /*适应苹果*/
            -webkit-overflow-scrolling: touch;
        }

        .list::-webkit-scrollbar {
            display: none;
        }

        .child {
            padding: 0px 29px;
            text-align: center;
            color: #858585;
            height: 30px;
        }

        .childact {
            color: #FF5600;
            font-size:13px;
            font-family:Adobe Heiti Std R;
            font-weight:normal;
        }

        .line {
            width: 68px;
            height: 3px;
            background-color: #FF722C;
            position: absolute;
            top: 41px;
            right: 50%;
            margin-right: -34px;
        }

        .theme {
            height: 103px;
            background-color: #FFF1E8;
            text-align: center;
            padding: 0px 15px;
        }

        .img {
            float: left !important;
            width: 68px !important;
            height: 66px !important;
            border-radius: 50% !important;
            margin-top: 18px !important;
        }

        .content {
            padding-left: 10px;
            padding-top: 23px;
            float: left;
            width: 73%;
            text-align: left;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .image {
            width: 32px !important;
            height: 32px !important;
            position: absolute;
            top: 33px;
            right: 20px;
            z-index: 999;
        }

        .lists {
            padding: 8px 10px;
        }

        .childlist {
            width: 50%;
            float: left;
            padding: 0px 6px;
        }

        .title_set {
            font-size: 15px;
            margin-top: 6px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .set {
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            font-size: 13px;
            color: #757575;
        }

        .date {
            font-size: 12px;
            position: absolute;
            bottom: 1px;
            right: 0px;
            font-weight: 400;
            color: #757575;
        }

        .title {
            height: 27px;
            line-height: 27px;
            background-color: #e5e5e5;
            display: -webkit-box;
            overflow-x: auto;
            /*适应苹果*/
            -webkit-overflow-scrolling: touch;
        }

        .title::-webkit-scrollbar {
            display: none;
        }

        .childa {
            padding: 0px 35px;
            text-align: center;
            color: #858585;
            font-size: 13px;
        }

        .childlast {
            color: #fff;
            background-color: #FF5600;
        }

        .tupian {
            width: 100%;
            padding-bottom: 51.5%;
            position: relative;
        }

        .tupian img {
            position: absolute;
            top: 0px;
            left: 0px;
            right: 0px;
            bottom: 0px;
            width: 100%;
            height: 100%;
            border-radius: 5px;
        }

        .tupian .videotype {
            position: absolute;
            left: 10px;
            top: 10px;
            z-index: 9;
            background-color: rgba(243, 152, 0, 0.9);
            color: #fff;
            padding: 0px 8px;
            font-size: 12px;
            border-radius: 5px;
        }

        .list {
            background: #fff;
            border-top: 2px solid #dadada;
        }
        .slide-fade-enter-active {
          transition: all .3s ease;
        }
        .slide-fade-leave-active {
          transition: all .3s cubic-bezier(1.0, 1.0, 0.8, 1.0);
        }
        .slide-fade-enter, .slide-fade-leave-to
        /* .slide-fade-leave-active for below version 2.1.8 */ {
          transform: translateY(10px);
          opacity: 0;
        }
        /*#erjidiv{
          background-color: red
        }*/
    </style>
</head>

<body>
    <div id="head_div"></div>
    <div id="vm" v-cloak>
        <div class="search" onclick="OpenHotSearchWin()" id="searchdiv">
            <input type="text" placeholder="输入搜索内容" class="input test">
            <img src="../../image/home/search.png" alt="">
        </div>
        <!-- hide -->
        <transition name="slide-fade">
        <div v-if="!headerflag">
            <div class="title" id="yijidiv">
                <div class="childa" @click="setleader1(item,index)" v-bind:class="{ childlast: item.flag }" v-for="item,index in Leaderlist">{{item.leader_name}}</div>
            </div>
            <div class="list" id="erjidiv">
                <div class="child test" v-bind:class="{ childact: item.flag }" @click="setleader2(item,index)" v-for="item,index in Erjilist">{{item.leader_name}}</div>
                <div class="aui-clearfix"></div>
            </div>
        </div>
        </transition>
        <transition name="slide-fade">
        <div v-show="headerflag">
            <div class="list" id="erjidiv">
                <div class="child test" v-bind:class="{ childact: item.flag }" @click="setleader2(item,index)" v-for="item,index in Erjilist">{{item.leader_name}}</div>
                <div class="aui-clearfix"></div>
            </div>
        </div>
        </transition>
    </div>
</body>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/config.js"></script>
<script type="text/javascript" src="../../script/rest.js"></script>
<script type="text/javascript" src="../../script/vue.2.5.js"></script>
<script type="text/javascript" src="../../script/zepto.js"></script>
<script type="text/javascript" src="../../script/common.js"></script>
<script type="text/javascript" src="../../script/faskclick.js"></script>
<script type="text/javascript">
    var uid = $api.getStorage('uid');
    var searchdiv, yijidiv, erjidiv;
    var vm = new Vue({
        el: '#vm',
        data: {
            Leaderlist: [], //一级导航
            Erjilist: [], //二级导航
            videogetlists: [], //视频列表
            headerflag: false
        },
        created: function() {
            var _this = this;
            apiready = function() {
                _this.init();
                api.parseTapmode();
                if ('addEventListener' in document) {
                    document.addEventListener('DOMContentLoaded', function() {
                        FastClick.attach(document.body);
                    }, false);
                }
                var header = $api.byId('head_div');
                $api.fixStatusBar(header);
                api.addEventListener({
                    name: 'gao'
                }, function(ret, err) {
                    if (ret.value.key1) {
                        _this.headerflag = true;
                        // yijidiv = 0;
                        api.setFrameAttr({
                            name: 'plan_frm',
                            rect: {
                                x: 0,
                                y: searchdiv +erjidiv+api.safeArea.top,
                                w: 'auto',
                                h: api.frameHeight - (searchdiv + erjidiv+api.safeArea.top)
                            }
                        });

                        // _this.openplanframe();

                    } else {
                        _this.headerflag = false;
                        // yijidiv = 27;
                        api.setFrameAttr({
                            name: 'plan_frm',
                            rect: {
                                x: 0,
                                y: searchdiv+27 +erjidiv+api.safeArea.top,
                                w: 'auto',
                                h: api.frameHeight - (searchdiv +27+ erjidiv+api.safeArea.top)
                            }
                        });
                    }

                });



            }
        },
        methods: {
            init: function() {
                var _this = this;
                //获取一级目录，
                _this.getyiji();
            },
            getyiji() {
                var _this = this;
                new rest().get('Leaderlist').datae({
                    module: 2
                }).success(function(res) {
                    if (res.flag == 1) {
                        var Leader = [];
                        res.msg.map(function(ret, index) {
                            if (ret.level == '1') {
                                ret['flag'] = false
                                Leader.push(ret)
                            }
                            if (index == 0) {
                                ret['flag'] = true;
                                _this.getListpid(ret.id)
                            }
                        })
                        _this.Leaderlist = Leader;
                        console.log(JSON.stringify(_this.Leaderlist))
                    }
                }).error(function(err) {
                    console.log(JSON.stringify(err))
                }).run()
            },
            //二级目录的点击
            getListpid: function(id) {
                var _this = this;
                searchdiv = $api.offset($api.byId('searchdiv')).h;
                yijidiv = $api.offset($api.byId('yijidiv')).h;
                erjidiv = $api.offset($api.byId('erjidiv')).h;

                new rest().get('getListpid').datae({
                    pid: id
                }).success(function(res) {
                    if (res.flag == 1) {
                        res.msg.map(function(ret, index) {
                            if (index == 0) {
                                ret['flag'] = true;
                                _this.erjiid = ret.id;
                                _this.openplanframe()

                                api.sendEvent({
                                    name: 'erjiclick',
                                    extra: {
                                        erjiid: _this.erjiid,
                                    }
                                });

                                // _this.videlist(_this.erjiid)
                            } else {
                                ret['flag'] = false
                            }
                        })
                        _this.Erjilist = res.msg;
                    }
                }).run()
            },
            openplanframe() {
                var _this = this;
                api.openFrame({
                    name: 'plan_frm',
                    url: './plan_frm.html',
                    rect: {
                        x: 0,
                        y: searchdiv + yijidiv + erjidiv+api.safeArea.top,
                        w: 'auto',
                        h: api.frameHeight - (searchdiv + yijidiv + erjidiv+api.safeArea.top)
                    },
                    pageParam: {
                        erjiid: _this.erjiid,
                        erjidiv: erjidiv
                    },
                    bounces: true,
                    bgColor: 'rgba(0,0,0,0)',
                    vScrollBarEnabled: true,
                    hScrollBarEnabled: true
                });
            },
            settime: function(res) {
                return apicmmon.formatDateTime(res)
            },
            //第一个导航。
            setleader1: function(item, index) {
                this.Leaderlist.map(function(res, index2) {
                    res.flag = false;
                })
                item.flag = true
                Vue.set(this.Leaderlist, index, item)
                this.getListpid(item.id)
            },
            //第二个导航
            setleader2: function(item, index) {
                this.Erjilist.map(function(res, index2) {
                    res.flag = false;
                })
                item.flag = true
                Vue.set(this.Erjilist, index, item)
                api.sendEvent({
                    name: 'erjiclick1',
                    extra: {
                        erjiid: item.id,
                    }
                });
                // this.videlist(this.erjiid)
            },

        }
    })

    function OpenHotSearchWin() {
      api.openWin({
          name: 'hot_win',
          url: '../few/hot_win.html',
          // bounces:false
      });
    }
    // function scroll() {
    //     window.onscroll = function() {
    //         var scrollTop = document.documentElement.scrollTop | document.body.scrollTop;
    //         if (scrollTop > heighth) {
    //             vm.headerflag = true
    //         } else {
    //             vm.headerflag = false
    //         }
    //     }
    // }
</script>

</html>
